import { useEffect, useState } from 'react'
import WeUI from 'react-weui'
import PropTypes from 'prop-types'

const {
    Page,
    Panel,
    PanelHeader,
    PanelBody,
    MediaBox,
    MediaBoxTitle,
    MediaBoxDescription,
    ButtonArea,
    Button,
    Dialog
} = WeUI
// const Address = ({address}) => {
//     const [showDialog, setShowDialog] = useState(false)
//     const deleteAddress = () => {
//         setShowDialog(true)
//     }
//     return (
//        <Page>
//            <Panel>
//            <PanelHeader>地址</PanelHeader>
//            <PanelBody>
//               {address.map(item => 
//                 <MediaBox key={item.id} type="text">
//                     <MediaBoxDescription>
//                         {item.address}
//                     </MediaBoxDescription>
//                     <MediaBoxTitle>{item.name}</MediaBoxTitle>
//                 </MediaBox>
//                 )}
//            </PanelBody>
//            </Panel>
            
//            <ButtonArea>
//                <Button>新增地址</Button>
//            </ButtonArea>
//            <ButtonArea>
//                <Button type="warn" onClick={deleteAddress}>删除按钮</Button>
//            </ButtonArea>
//            <Dialog show={showDialog} type="ios" title="确定要删除地址吗？"/>
//        </Page>
//     )
// }

const Address = ({address}) => {
    const [showDialog, setShowDialog] = useState(false)
    return (
        
        <div>
            {address.map(item => <li key={item.id}>{item.name} - {item.address}</li>)}
        </div>
    )
}

Address.propTypes = {
    address: PropTypes.array.isRequired
}

export default Address